<script setup>
import {get, post, del, put} from '../../api/http'
import { onMounted,ref } from 'vue';
import { Search, Plus, Delete } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const keyword = ref('')
const tagList = ref([])
const total = ref(0)
const showTagForm = ref(false)
const tag = ref({})
const isAdd = ref(true)
const preDeleteIdList = ref([])
const loading = ref(false)

const getTagList = () => {
    loading.value = true
    get('tag',{keyword:keyword.value}).then(res=>{
        if(res.status){
            tagList.value = res.data.list
            total.value = res.data.total
        }
        loading.value = false
    })
}

const submitForm = () => {
    if(isAdd.value){
        post('tag',tag.value).then(res=>{
            ElMessage({type:res.status?'success':'error',message:res.msg})
            if(res.status){
                getTagList()
                showTagForm.value = false
            }
        })
    }else{
        put('tag',tag.value).then(res=>{
            ElMessage({type:res.status?'success':'error',message:res.msg})
            if(res.status){
                getTagList()
                showTagForm.value = false
            }
        })
    }
    
}

const removeTag = (id) => {
    if(id>-1){
        preDeleteIdList.value = []
        preDeleteIdList.value = [id]
    }
    if(preDeleteIdList.value.length==0){
        ElMessageBox.alert('请至少选择一个标签删除',{type:'warning'})
        return
    }
    ElMessageBox.confirm('该操作将永久删除此标签，是否继续?','提示',{type:'warning'}).then(()=>{
        del('tag',preDeleteIdList.value).then(res=>{
            ElMessage({type:res.status?'success':'error',message:res.msg})
            if(res.status){
                getTagList()
            }
        })
    })
}

const handleSelected = (data) => {
    let temp = []
    data.forEach(element => {
        temp.push(element.id)
    });
    preDeleteIdList.value = temp
}

const edit = (data) => {
    tag.value = data
    showTagForm.value = true
    isAdd.value = false
}

onMounted(()=>{
    getTagList()
})

</script>
<template>
    <main v-blog-title data-title="标签管理">
        <div class="toolBar">
            <el-input v-model="keyword" @input="getTagList" clearable :suffix-icon="Search" placeholder="输入关键字" style="width:300px; margin-right:10px;"></el-input>
            <el-button type="primary" @click="showTagForm=true;isAdd=true;tag={}" :icon="Plus">增加标签</el-button>
            <el-button type="danger" @click="removeTag(-1)" :icon="Delete">删除标签</el-button>
        </div>
        <div class="content" v-loading="loading">
            <el-table border :data="tagList" @selection-change="handleSelected">
                <el-table-column type="selection" width="44"></el-table-column>
                <el-table-column label="标签名称" prop="tagName"></el-table-column>
                <el-table-column label="创建用户" prop="nickName"></el-table-column>
                <el-table-column label="引用次数" prop="quoteCount"></el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button @click="edit(scope.row)" plain size="small" type="primary">编辑</el-button>
                        <el-button @click="removeTag(scope.row.id)" type="danger" plain size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </main>
    <el-dialog width="400" title="标签信息" v-model="showTagForm">
        <el-form>
            <el-form-item>
                <el-input v-model="tag.tagName" placeholder="输入标签名称"></el-input>
            </el-form-item>
        </el-form>
        <div style="width:100%; text-align:right">
            <el-button @click="submitForm" type="primary">提交</el-button>
        </div>
    </el-dialog>
</template>
<style scoped>
    main{
        padding: 10px;
    }
    .toolBar{
        margin-bottom: 10px;
    }
</style>